/** * 左边菜单 */
<template>
  <div id="leftnav">
    <el-menu
      :default-active="$route.path"
      router
      class="el-menu-vertical-demo"
      background-color="#2F4050"
      text-color="rgba(255,255,255,0.75)"
      active-text-color="#fff"
      :unique-opened="true"
    >
      <div v-for="menu in allmenu" :key="menu.menuid">
        <el-menu-item v-if="menu.menus === null" :index="menu.url"
          ><img class="icon" :src="menu.icon" alt="" />
          <span>{{ menu.menuname }}</span>
        </el-menu-item>
        <el-submenu v-else :index="menu.url">
          <template slot="title">
            <img class="icon" :src="menu.icon" alt="" />
            <span>{{ menu.menuname }}</span>
          </template>
          <el-menu-item-group>
            <el-menu-item
              v-for="chmenu in menu.menus"
              :index="chmenu.url"
              :key="chmenu.menuid"
            >
              <i class="iconfont" :class="chmenu.icon"></i>
              <span>{{ chmenu.menuname }}</span>
            </el-menu-item>
          </el-menu-item-group>
        </el-submenu>
      </div>
    </el-menu>
  </div>
</template>
<script>
export default {
  name: "leftnav",
  data() {
    return {
      collapsed: false,
      allmenu: [
        {
          menuid: 10,
          icon: require("../assets/img/menu/icon10.png"),
          menuname: "首页",
          url: "/home",
          menus: null
        },
        {
          menuid: 20,
          icon: require("../assets/img/menu/icon20.png"),
          menuname: "货主管理",
          url: "货主管理",
          menus: [
            {
              menuid: 21,
              icon: "",
              menuname: "货主认证",
              url: "/certified?type=1"
            },
            {
              menuid: 22,
              icon: "",
              menuname: "发货地址",
              url: "/sendaddress"
            },
            {
              menuid: 23,
              icon: "",
              menuname: "收货地址",
              url: "/acceptaddress"
            },
            {
              menuid: 24,
              icon: "",
              menuname: "常跑路线",
              url: "/oftenrace"
            },
            {
              menuid: 25,
              icon: "",
              menuname: "货主钱包",
              url: ""
            },
            {
              menuid: 26,
              icon: "",
              menuname: "提现申请",
              url: ""
            },
            {
              menuid: 27,
              icon: "",
              menuname: "保证金提取审核",
              url: ""
            },
            {
              menuid: 28,
              icon: "",
              menuname: "投诉信息处理",
              url: ""
            },
            {
              menuid: 29,
              icon: "",
              menuname: "用户意见处理",
              url: ""
            }
          ]
        },
        {
          menuid: 30,
          icon: require("../assets/img/menu/icon30.png"),
          menuname: "承运商管理",
          url: "承运商管理",
          menus: [
            {
              menuid: 31,
              icon: "",
              menuname: "承运商认证",
              url: "/certified?type=2"
            },{
              menuid: 32,
              icon: "",
              menuname: "司机管理",
              url: "/driverlist"
            },{
              menuid: 33,
              icon: "",
              menuname: "车俩管理",
              url: "/carlist"
            },
          ]
        },
        {
          menuid: 40,
          icon: require("../assets/img/menu/icon40.png"),
          menuname: "运输管理",
          url: "",
          menus: [
            {
              menuid: 41,
              icon: 'icon-cat-skuQuery',
              menuname: '订单管理',
              url: '/order'
            },{
              menuid: 42,
              icon: 'icon-cat-skuQuery',
              menuname: '订单台账',
              url: '/orderledger'
            },{
              menuid: 43,
              icon: 'icon-cat-skuQuery',
              menuname: '运单管理',
              url: '/waybill'
            },{
              menuid: 44,
              icon: 'icon-cat-skuQuery',
              menuname: '运单台账',
              url: '/waybillledger'
            },{
              menuid: 45,
              icon: 'icon-cat-skuQuery',
              menuname: '异常管理',
              url: ''
            },{
              menuid: 46,
              icon: 'icon-cat-skuQuery',
              menuname: '收发货设置',
              url: ''
            }
          ]
        },
        {
          menuid: 50,
          icon: require("../assets/img/menu/icon50.png"),
          menuname: "对账管理",
          url: "",
          menus: null
        },
        {
          menuid: 60,
          icon: require("../assets/img/menu/icon60.png"),
          menuname: "数据同步",
          url: "",
          menus: null
        },
        {
          menuid: 70,
          icon: require("../assets/img/menu/icon70.png"),
          menuname: "合同管理",
          url: "",
          menus: null
        },
        {
          menuid: 80,
          icon: require("../assets/img/menu/icon80.png"),
          menuname: "数据统计分析",
          url: "",
          menus: null
        },
        {
          menuid: 90,
          icon: require("../assets/img/menu/icon90.png"),
          menuname: "计费管理",
          url: "",
          menus: null
        },
        {
          menuid: 100,
          icon: require("../assets/img/menu/icon00.png"),
          menuname: "系统管理",
          url: "",
          menus: null
        }
      ]
    };
  },
  // 创建完毕状态(里面是操作)
  created() {
    // let platform =
    //   this.allmenu = this.allmenu.concat(platform)
    // this.$set(this.allmenu, platform)
  }
};
</script>
<style lang="scss">
#leftnav {
  height: 100%;
  .el-menu-vertical-demo:not(.el-menu--collapse) {
    // width: 340px;
    height: 100%;
  }
  .el-menu-vertical-demo:not(.el-menu--collapse) {
    border: none;
    text-align: left;
  }
  .el-menu-item-group__title {
    padding: 0px;
  }
  // 只有一级导航
  .el-menu-item {
    padding-left: 30px !important;
    .icon {
      width: 16px;
    }
    span {
      margin-left: 30px;
    }
  }
  // 一级和二级
  .el-submenu__title {
    padding: 0 30px !important;
    .icon {
      width: 16px;
    }
    span {
      margin-left: 30px;
    }
  }
  .el-menu-item-group {
    background-color: red !important;
  }
  .el-menu-item-group > ul > li {
    padding-left: 45px !important;
    background-color: #293846 !important;
    border-left: 6px solid #52a1f1;
    box-sizing: border-box;
  }
}
</style>
